﻿<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>GIERA</title>
	
		<style>
		
			*
			{
				padding:0;
				margin:0;
			}
			
			body
			{
				background-color:#000;
				font-family:Courier;
				-webkit-user-select: none;	       
				-moz-user-select: none;
				-ms-user-select: none;
				cursor:default;
				color:#FFF;
			}
			
			input[type=button]
			{
				margin : 10px;
				background-color:transparent;
				font-size:14px;
				font-weight:bold;
				border: 3px solid #F00;
				color:#FFF;
				padding:7px;
			}
			
			input[type=button]:hover
			{
				background-color:#757575;
			}
			
			div
			{
				background-color:#757575;
				font-size:14px;
				font-weight:bold;
				border: 3px solid #F00;
				min-width:100px;
				min-height:100px;
				color:#000;
			}
			
			#konsola
			{
				position:absolute;
				right:0px;
				bottom:0px;
				width:600px;
				height:150px;
				overflow:hidden;
			}
			
			#canvas
			{
				width:500px;
				height:350px;
				margin: 100px 400px;
				border:1px solid #FFF;
			}
			
			#datadiv
			{
				position:absolute;
				left:0;
				top:0;
				padding:10px;
				background-color:#000;
				color:#666;
			}
			
		</style>
	
		<script>
		
			var requestAnimationFrame= window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
		
			function _( id )
			{
				return document.getElementById( id );
			}
		
			var isLoop=false;
			var degz=0;
			var speed = 0.05;
			
			document.addEventListener("DOMContentLoaded",function(){
			
				canvas=_("canvas");
				ctx=canvas.getContext("2d");
				ctx.fillStyle="#000";
				ctx.strokeStyle="#909";
				rysuj();
				//isLoop=true;
				//requestAnimationFrame( rysuj );
				
				canvas.addEventListener("click",function(){
					
					if( isLoop )pauseGame();
					else resumeGame();
					
				});
			
				
			});
			
			function drawLine()
			{
					var el = Math.sqrt( Math.pow(canvas.width/2,2)+Math.pow(canvas.height/2,2) );
					var x = el * Math.sin( degz-.07 );
					var y = el * Math.cos( degz-.07 );
					//sprawdzanie punktow kolizji
					//for(i=10;i<el;++i)alert( "[" + (i*Math.sin( degz-.07 )) + "," + (i*Math.cos( degz-.07 )) + "]" );
					ctx.save();
					ctx.translate( canvas.width/2,canvas.height/2 );
					ctx.beginPath();
					ctx.moveTo(0,0);	
					ctx.lineTo(x,y);
					ctx.stroke();
					ctx.restore();
			}
			
			
			function rysuj()
			{
				ctx.save();
				ctx.fillStyle="#000";
				ctx.fillRect(0,0,canvas.width,canvas.height);
				ctx.beginPath();
				ctx.arc(canvas.width/2,canvas.height/2,10,0,Math.PI*2);
				ctx.stroke();
				ctx.beginPath();
				ctx.fillStyle="#FFF";
				ctx.arc(canvas.width/2,canvas.height/2,3,0,Math.PI*2);
				ctx.fill();
				ctx.beginPath();
				ctx.translate( canvas.width/2,canvas.height/2 );
				//ctx.rotate( Math.PI/180*degz );
				//ctx.arc(0,0,20,0,Math.PI/180*45);
				var x = 10*Math.sin(degz);
				var h = 10*Math.cos(degz);
				ctx.arc(x,h,2,0,Math.PI*2);
				ctx.fill();
				ctx.restore();
				degz+=speed;
				//writeDown( degz );
				if( degz > Math.PI*2 )
				{
					speed = Math.floor( Math.random()*10+5 )/100;
					console.log( speed );
					degz=0;
				}
				if( isLoop )requestAnimationFrame( rysuj );
				else drawLine();
			}
			
			function pauseGame()
			{
				isLoop = false;
			}
			
			function resumeGame()
			{
				isLoop = true;
				requestAnimationFrame( rysuj );
			}
			
			function writeDown(info)
			{
				if(info == "") _("konsola").innerHTML="";
				else _("konsola").innerHTML = info + "<br />" + _("konsola").innerHTML ;
			}
			
		</script>
		
	</head>
	<body>
	
	
		<canvas id="canvas"></canvas>
		<div id="konsola" onclick="writeDown('')"></div>
		
	</body>

</html>